<template>
  <div class="app-container">
    <div class="my-define-dialog-title">
      {{reqForm.dialogTitle}}
      <div class="my-define-dialog-title-btn">
        <!-- <i v-loading.fullscreen.lock="loading" @click="submitForm" class="saas-iconfont saas-icon-baocun1"></i> -->
        <i @click="cancel(false)" class="saas-iconfont saas-icon-caozuo-quanping-shousuo"></i>
      </div>
    </div>
    <el-row class="my-dialog-top-row" v-loading="loading">
      <el-col :span="24">
        <el-form size="medium" ref="myForm" :label-width="labelForm.labelWidth"
          :label-position="labelForm.labelPosition">
          <el-row>
            <el-col :span="24">
              <el-form-item label="附件" :prop="'FileIds'" :rules="{
              message: '请选择附件',
              trigger: 'change'
            }">
                <el-upload :action="uploadAction" name="importFile" :auto-upload="true" :headers="uploadHeaders"
                  :on-remove="handleFileRemove" :on-success="handleFileSuccess" :file-list="uploadFormData.fileList"
                  :data="uploadData" :before-upload="handleBeforeUpload">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip"></div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    getToken
  } from '@/utils/auth'
  import defaultSettings from '@/settings'
  export default {
    name: 'master-import',
    props: {
      reqForm: {
        type: Object,
        default: () => ({
          dialogTitle: '',
          uploadFolder: ''
        })
      },
      loading: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        customeStyle: {
          height: (window.innerHeight - 180) + 'px'
        },
        labelForm: defaultSettings.labelForm,
        uploadHeaders: {
          profile: getToken()
        },
        uploadData: {
          FolderName: this.reqForm.uploadFolder
        },
        uploadFormData: {
          fileList: []
        },
        uploadAction: process.env.VUE_APP_BASE_API + '/Common/Upload/UploadImportFile'
      }
    },
    created() {},
    methods: {
      handleBeforeUpload(file) {
        const nameArray = file.name.toLowerCase().split('.');
        const suffix = nameArray[nameArray.length - 1];
        const isXls = suffix === 'xls';
        const isXlsx = suffix === 'xlsx';
        if (!isXls && !isXlsx) {
          this.$message.error('上传附件只能是 xls、xlsx格式!');
        }
        return isXls || isXlsx;
      },
      handleFileRemove(file, fileList) {
        var index = this.uploadFormData.fileList.findIndex(item => {
          return item.uid === file.uid;
        });
        if (index >= 0) {
          this.uploadFormData.fileList.splice(index, 1);
        }
        var fileIdList = []
        this.uploadFormData.fileList.forEach(function(fileItem) {
          fileIdList.push(fileItem.fileId)
        })
      },
      handleFileSuccess(res, file) {
        if (res.status) {
          this.uploadFormData.fileList = []
          this.uploadFormData.fileList.push({
            fileId: res.outputData.fileId,
            name: file.name,
            url: res.outputData.fileUrl,
            uid: file.uid
          })
          var fileIdList = []
          this.uploadFormData.fileList.forEach(function(fileItem) {
            fileIdList.push(fileItem.fileId)
          })
        }
      },
      submitForm() {
        var that = this;
        var fileIdList = []
        this.uploadFormData.fileList.forEach(function(fileItem) {
          fileIdList.push(fileItem.fileId)
        })
        if (fileIdList.length == 0) {
          this.$message({
            message: '请选择文件',
            type: 'warning'
          })
          return false
        }
        var fileIds = fileIdList.join(',')
        this.$$parent(this, "submitUpload", fileIds)
      },
      cancel(reload) {
        this.$$parent(this, "doClosePop", reload)
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
</style>
